<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>小米商城注册</title>
	<style type="text/css">
		#max-bg{
			width: 100%;
			height: 800px;
			background: #F9F9F9;
		}
		#centre_box{
			width:55%;
			height:70%;
			background: #FFFFFF;
			position: absolute;
			top:100px;
			left: 500px;
		}
		#milogo{
			position: absolute;
			left: 46%;
		}
		.head{
			width: 400px;
			height: 200px;
			background-color: #f0f0f0;
			border-radius: 5px;
			margin: 0 auto;
			padding: 50px;
			position: relative;
		}
		#zctext{
			font-size:35px;
			margin-left: 37%;
			margin-top: 60px;
		}
		#sub{
			width: 388px;
			height: 50px;
			margin-left: 105px;
			margin-top: 20px;
			background: #FF6700;
			color: #FFFFFF;
			border:none;
		}
		#username{
			width: 383px;
			height: 40px;
			margin-left: 25px;
			margin-top:15px;
			background: #FAFFBD;
			border: 2px solid #E0E0E0;
		}
		#userpassword{
			width: 383px;
			height: 40px;
			margin-left: 25px;
			margin-top:15px;
			background: #FAFFBD;
			border: 2px solid #E0E0E0;
		}
		#usermail{
			width: 383px;
			height: 40px;
			margin-left: 25px;
			margin-top:15px;
			background: #FAFFBD;
			border: 2px solid #E0E0E0;
		}
		#userphone{
			width: 383px;
			height: 40px;
			margin-left: 25px;
			margin-top:15px;
			background: #FAFFBD;
			border: 2px solid #E0E0E0;
		}
		#Verification{
			width: 270px;
			height: 40px;
			margin-left: 25px;
			margin-top:15px;
			background: #FAFFBD;
			border: 2px solid #E0E0E0;
		}
		#form-text{
			width:660px;
			height:507px;
			margin: 0px auto;
		}
		#vehicle{
			margin-top: 20px;
			margin-left: 80px;
		}
		#code{
			height: 45.7px;
			width: 113px;
			font-size: 12px;
			background: #FFFFFF;
			border: 2px solid #E0E0E0;
			border-left: 0px;
			margin-top: 20px;
		}
		#prompt{
			color: red;
		}
	</style>
	<script type="text/javascript" src="../js/jquery-3.1.0.js"></script>
	<script type="text/javascript">
        function codeButton(){
            var code = $("#code");
            code.attr("disabled","disabled");
            setTimeout(function(){
                code.css("opacity","0.8");
            },1000)
            var time = 60;
            var set=setInterval(function(){
                code.val("("+--time+")秒后重新获取");
            }, 1000);
            setTimeout(function(){
                code.attr("disabled",false).val("重新获取验证码");
                clearInterval(set);
            }, 60000);
        }
        $(function() {
            $("#code").click(function() {
                $.ajax({
                    type:"post",
                    url:"../Verification_code",
                    data:{"op":"SMSlogin","userid":$("#userphone").val()}
                });
            });
        });
        $(function() {
            $("#userphone").blur(function(){
                $.ajax({
                    type:"post",
                    url:"../Verification_code",
                    data:{"op":"Verification","userid":$("#userphone").val()},
                    success:function(jg){
                        $("#prompt").text(jg);
                    }
                });
            });
        });
	</script>
</head>
<body>
<div id="max-bg">
	<div id="centre_box">
		<img src="../img/milogo.png" id="milogo"><br />
		<div id="zctext">注册小米账号</div>
		<div id="form-text">
			<form action="Verification_code?op=Verification_bd" method="post">
				<span class="nametext">姓&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp名：</span><input type="text" name="username" id="username"><br />
				<span class="nametext">密&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp码：</span><input type="password" name="userpassword" id="userpassword"><br />
				<span class="nametext">邮&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp箱：</span><input type="text" name="usermail" id="usermail"><br />
				<span class="nametext">手机号码：</span><input type="text" name="userid" id="userphone"><span id="prompt"></span><br />
				<span class="nametext">验&nbsp&nbsp证&nbsp&nbsp码:&nbsp&nbsp</span><input type="text" name="Verification" id="Verification"><input type="button" class="btn" id="code" value="获取验证码" onclick="codeButton()"><br />
				<input type="submit" value="注册"  id="sub"><br />
				<input type="checkbox" name="vehicle" value="Car" checked="checked" id="vehicle"/><span class="textaa">注册账号即表示您同意并愿意遵守小米</span><span class="xieyi">用户协议</span><span class="textaa">和</span>
				<span class="xieyi">隐私协议</span>
			</form>
		</div>
	</div>
</div>
</body>
</html>